<html class="bg-yellow-400">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php if (isset($pageName)) echo $pageName; ?></title>
    <!-- CSS Styles -->
    <link href="/template/css/tailwind.css" rel="stylesheet">
    <link href="/template/css/font-awesome.min.css" rel="stylesheet">
    <link href="/template/css/OpenSans.css" rel="stylesheet">

    <!-- Icon -->
    <link rel="apple-touch-icon" sizes="57x57" href="/template/images/ico/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/template/images/ico/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/template/images/ico/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/template/images/ico/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/template/images/ico/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/template/images/ico/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/template/images/ico/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/template/images/ico/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/template/images/ico/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/template/images/ico/android-icon-192x192.png">
    <link rel="icon" type="image/ png" sizes="32x32" href="/template/images/ico/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/template/images/ico/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/template/images/ico/favicon-16x16.png">
    <link rel="manifest" href="/template/images/ico/manifest.json">
    <meta name="msapplication-TileImage" content="/template/images/ico/ms-icon-144x144.png">
</head>

<body>

<header id="app" class="bg-gradient-to-tr from-yellow-400 to-yellow-300">
    <!-- navbar and menu -->
    <nav class="shadow">

        <div class="flex justify-between items-center py-6 px-10 container mx-auto">

            <div>
                <a href="/">
                    <h1 class="text-2xl font-bold bg-gradient-to-tr from-indigo-600 to-green-600 bg-clip-text text-transparent">
                        NetFlix</h1>
                </a>
            </div>
            <div>
                <div class="hover:cursor-pointer sm:hidden">
                    <span class="h-1 rounded-full block w-8 mb-1 bg-gradient-to-tr from-indigo-600 to-green-600"></span>
                    <span class="h-1 rounded-full block w-8 mb-1 bg-gradient-to-tr from-indigo-600 to-green-600"></span>
                    <span class="h-1 rounded-full block w-8 mb-1 bg-gradient-to-tr from-indigo-600 to-green-600"></span>
                </div>
                <div class="flex items-center">
                    <ul class="sm:flex space-x-4 hidden items-center">
                        <?php if (User::isLogged()) : ?>
                            <?php // Если этот пользователь админ то добавим пункт для админ панели
                            $userId = User::checkLogged();
                            $user = User::getUser($userId);
                            if ($user['role'] == 'admin') :
                                ?>
                                <li><a href="/admin"
                                       class="text-blue-600 hover:text-indigo-600 text-md ">Админпанель</a></li>
                            <?php endif; ?>
                            <li><a href="/profile" class="text-blue-600 hover:text-indigo-600 text-md ">Профиль</a></li>
                        <?php endif; ?>
                        <li><a href="/index.php" class="text-blue-600 hover:text-indigo-600 text-md">На главную</a></li>
                        <li><a href="#" class="text-blue-600 hover:text-indigo-600 text-md ">Расписание</a></li>
                        <li><a href="/catalog/" class="text-blue-600 hover:text-indigo-600 text-md ">Афиша</a></li>
                        <li><a href="/cart/" class="cart text-blue-600 hover:text-indigo-600 text-md ">Корзина</a></li>
                        <li><a href="#" class="text-blue-600 hover:text-indigo-600 text-md ">Контакты</a></li>
                        <li class="relative">
                            <input v-model="search" type="text" placeholder="Поиск..."
                                   class=" bg-gray-100 rounded-md  outline-none pl-2 ring-indigo-700 w-full mr-2 p-2">
                            <ul class="absolute top-20 bg-blue-500">
                                <li v-if="search" v-for="todo in todosByTitle" :key="todo.id"><a>{{ todo.name }}</a>
                                </li>
                            </ul>

                            <span><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
                                       viewBox="0 0 24 24" stroke="currentColor ">

                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg></span>
                        </li>
                    </ul>
                    <?php if (!User::isLogged()) : ?>
                        <div class="md:flex items-center hidden space-x-4 ml-8 lg:ml-12">
                            <a class="text-blue-600  py-2 hover:cursor-pointer hover:text-indigo-600" href="/auth/">Войти</a>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </nav>
</header>

